<template>
  <section class="blog-section pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 pb-30">
          <div class="sidebar-item sidebar-search">
            <form>
              <input
                type="text"
                class="form-control"
                placeholder="Search blogs"
              />
              <button class="btn main-btn main-btn-secondary" type="submit">
                <i class="flaticon-search"></i>
              </button>
            </form>
          </div>
          <div class="sidebar-item">
            <h3>Our Categories</h3>
            <ul class="sidebar-list">
              <li>
                <a href="#">
                  All of the blogs
                  <span>122</span>
                </a>
              </li>
              <li>
                <a href="#">
                  Furniture design
                  <span>40</span>
                </a>
              </li>
              <li>
                <a href="#">
                  Business
                  <span>22</span>
                </a>
              </li>
              <li>
                <a href="#">
                  Furniture branding
                  <span>60</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="sidebar-item">
            <h3>Recent Posts</h3>
            <div class="sidebar-post">
              <div class="sidebar-post-item">
                <a href="single-blog.html">
                  <div class="sidebar-post-thumb">
                    <img
                      :src="require('assets/images/products/product-14.png')"
                      alt="product"
                    />
                  </div>
                  <div class="sidebar-post-content">
                    <h3>Comfortable Bed Prices Have Reduces To $990.0</h3>
                    <div class="blog-entry">Mar 03, 2021</div>
                  </div>
                </a>
              </div>
              <div class="sidebar-post-item">
                <a href="single-blog.html">
                  <div class="sidebar-post-thumb">
                    <img
                      :src="require('assets/images/products/product-6.png')"
                      alt="product"
                    />
                  </div>
                  <div class="sidebar-post-content">
                    <h3>Mini High Table Added On On This Spring 2020</h3>
                    <div class="blog-entry">Mar 02, 2021</div>
                  </div>
                </a>
              </div>
            </div>
          </div>
          <div class="sidebar-item">
            <h3>Recent Tags</h3>
            <ul class="sidebar-tag">
              <li>
                <a href="#">Business</a>
              </li>
              <li>
                <a href="#">All</a>
              </li>
              <li>
                <a href="#">Brand</a>
              </li>
              <li>
                <a href="#">Design</a>
              </li>
              <li>
                <a href="#">Blogs</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-lg-9 pb-30">
          <article class="mb-30">
            <div class="forum-details">
              <img
                :src="require('assets/images/blogs/blog-lg-1.jpg')"
                alt="blog"
              />
              <h2>
                We Produce The Best &amp; The Super Product For You In The
                Global Market
              </h2>
              <ul class="blog-card-action">
                <li>
                  <i class="flaticon-clock"></i>
                  Mar 03, 2021
                </li>
                <li>
                  <i class="flaticon-visibility"></i>
                  12.2 K
                </li>
                <li>
                  <i class="flaticon-message"></i>
                  2.5 K
                </li>
              </ul>
              <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                diam nonumy eirmod tempor invidunt ut at in labore et dolore
                magna aliquyam erat, sed diam voluptua. At vero eos et accusam
                et justo duo dolores eti ea rebum. Stet clita kasd gubergren, no
                sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ins
                it ipsum dolor sit amet, consetetur sadipscing elitrres et ea
                rebum.
              </p>
              <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                quae ab illo inventore veritatis et quasi architecto beatae
                vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                voluptas sit aspernatur aut odit aut fugit, sed quia
                consequuntur magni dolores eos qui ratione voluptatem sequi
                nesciunt.
              </p>
              <blockquote>
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                  diam nonumy eirmod tempor invidunts ut at in labore et dolore
                  magna aliquyam erat, sed diam voluptua. At vero eos et accusam
                  et justo duo dolores eti ea rebum. Stet clita kasd gubergren.
                </p>
              </blockquote>
              <img
                :src="require('assets/images/blogs/blog-lg-1.jpg')"
                alt="blog"
              />
              <p>
                At vero eos et accusamus et iusto odio dignissimos ducimus qui
                blanditiis praesentium voluptatum deleniti atque corrupti quos
                dolores et quas molestias excepturi sint occaecati cupiditate
                non provident, similique sunt in culpa qui officia deserunt
                mollitia animi, id est laborum et dolorum fuga. Et harum quidem
                rerum facilis est et expedita distinctio. Nam libero tempore,
                cum soluta nobis est eligendi optio cumque nihil impedit quo
                minus id quod maxime placeat facere possimus, omnis voluptas
                assumenda est, omnis dolor repellendus.
              </p>
              <ul class="blog-details-list">
                <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
                <li>
                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                </li>
                <li>
                  Quis autem vel eum iure reprehenderit qui in ea voluptate
                </li>
                <li>
                  At vero eos et accusamus et iusto odio dignissimos ducimus
                </li>
                <li>
                  Nam libero tempore, cum soluta nobis est eligendi optio cumque
                </li>
                <li>
                  Itaque earum rerum hic tenetur a sapiente delectus, ut aut
                </li>
              </ul>
              <div class="row">
                <div class="col-sm-6">
                  <img
                    :src="require('assets/images/blogs/blog-6.jpg')"
                    alt="blog"
                  />
                </div>
                <div class="col-sm-6">
                  <img
                    :src="require('assets/images/blogs/blog-5.jpg')"
                    alt="blog"
                  />
                </div>
              </div>
              <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                diam nonumy eirmod tempor invidunt ut at in labore et dolore
                magna aliquyam erat, sed diam voluptua. At vero eos et accusam
                et justo duo dolores eti ea rebum. Stet clita kasd gubergren, no
                sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ins
                it ipsum dolor sit amet, consetetur sadipscing elitrres et ea
                rebum.
              </p>
            </div>
          </article>
          <div class="article-action mb-30">
            <div class="article-action-item">
              <h4>Comments <span>(01 Comments)</span></h4>
            </div>
            <div class="article-action-item">
              <div class="share-post">
                <h4>Share:</h4>
                <ul class="social-list social-list-secondcolor">
                  <li>
                    <a href="#"><i class="flaticon-facebook"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="flaticon-instagram"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="flaticon-twitter"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="flaticon-pinterest"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="post-review-box mb-30">
            <div class="review-holder-item">
              <div class="post-review-item post-review-item-main">
                <div class="post-review-thumb">
                  <img
                    :src="require('assets/images/blogs/blog-author-1.jpg')"
                    alt="user"
                  />
                </div>
                <div class="post-review-content">
                  <div class="post-review-content-header">
                    <div class="post-review-header-item">
                      <h3>Jennifer Andrew</h3>
                      <ul class="review-star">
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                      </ul>
                      <p>3 weeks ago</p>
                    </div>
                    <div class="post-review-header-item">
                      <a href="#" class="post-review-btn">Reply</a>
                    </div>
                  </div>
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sa dipscing elitr,
                    sed diam nonumy ser irmodey tey mporep invidunt ut laboredi
                    et dolore ma gna aliquyam.
                  </p>
                </div>
              </div>

              <div class="post-review-item post-review-item-reply">
                <div class="post-review-thumb">
                  <img
                    :src="require('assets/images/blogs/blog-author-2.jpg')"
                    alt="review"
                  />
                </div>
                <div class="post-review-content">
                  <div class="post-review-content-header">
                    <div class="post-review-header-item">
                      <h3>Jane Ronan</h3>
                      <p>3 weeks ago</p>
                    </div>
                    <div class="post-review-header-item">
                      <a href="#" class="post-review-btn">Reply</a>
                    </div>
                  </div>
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sa dipscing elitr,
                    sed diam nonumy ser irmodey tey mporep invidunt ut laboredi
                    et dolore ma gna aliquyam.
                  </p>
                </div>
              </div>
            </div>
            <div class="review-holder-item">
              <div class="post-review-item post-review-item-main">
                <div class="post-review-thumb">
                  <img
                    :src="require('assets/images/blogs/blog-author-3.jpg')"
                    alt="review"
                  />
                </div>
                <div class="post-review-content">
                  <div class="post-review-content-header">
                    <div class="post-review-header-item">
                      <h3>Robert John</h3>
                      <ul class="review-star">
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                      </ul>
                      <p>3 weeks ago</p>
                    </div>
                    <div class="post-review-header-item">
                      <a href="#" class="post-review-btn">Reply</a>
                    </div>
                  </div>
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sa dipscing elitr,
                    sed diam nonumy ser irmodey tey mporep invidunt ut laboredi
                    et dolore ma gna aliquyam.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="post-comment-area">
            <div class="sub-section-title">
              <h2 class="sub-section-title-heading">Leave A Comment</h2>
            </div>
            <form class="contact-form" id="contactForm" novalidate="true">
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group mb-20">
                    <input
                      type="text"
                      name="name"
                      id="name"
                      class="form-control form-control-borderbg form-control-borderbg-secondcolor"
                      placeholder="Your name*"
                      required=""
                      data-error="Please enter your name"
                    />
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group mb-20">
                    <input
                      type="text"
                      name="email"
                      id="email"
                      class="form-control form-control-borderbg form-control-borderbg-secondcolor"
                      placeholder="Your email*"
                      required=""
                      data-error="Please enter your email"
                    />
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group mb-20">
                    <textarea
                      name="message"
                      class="form-control form-control-borderbg form-control-borderbg-secondcolor"
                      id="message"
                      rows="6"
                      placeholder="Your comment*"
                    ></textarea>
                  </div>
                </div>
              </div>
              <div class="input-checkbox input-checkbox-secondcolor mb-20">
                <input type="checkbox" id="contact1" />
                <label for="contact1"
                  >Save my name and email in this browser for the next time I
                  comment.</label
                >
              </div>
              <div class="form-button">
                <button
                  class="btn main-btn main-btn-secondary disabled"
                  type="submit"
                  style="pointer-events: all; cursor: pointer"
                >
                  Send A Comment
                </button>
                <div id="msgSubmit"></div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({});
const {} = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

const methods = {};
</script>
<style lang="scss" scoped></style>
